import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Table } from 'antd';
import { http } from 'libs';
import arrowUp from './assets/ar-up.png';
import arrowDown from './assets/ar-down.png';
import arrowDemo from './assets/ar-demo.png';
import css from './index.module.less';


export default observer(function (props) {
  const { id } = props.record
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasModify, setHasModify] = useState(false);

  const columns = [
    {
      title: '飞机型号',
      dataIndex: 'model',
    },
    {
      title: '最大起飞重量(Kg)',
      dataIndex: 'mtow',
      width: '14%',
    },
    {
      title: '计划任务数量',
      dataIndex: 'task_1',
      width: '14%',
      render: renderNum
    },
    {
      title: '时控部件数量',
      dataIndex: 'task_2',
      width: '14%',
      render: renderNum
    },
    {
      title: 'AD数量',
      dataIndex: 'control_ad',
      width: '14%',
      render: renderNum
    },
    {
      title: 'SB数量',
      dataIndex: 'control_sb',
      width: '14%',
      render: renderNum
    },
    {
      title: '飞行记录数量',
      dataIndex: 'log_count',
      width: '14%',
      render: renderNum
    },
  ]

  useEffect(() => {
    getData()
  }, [id]);

  function renderNum(txt) {
    return (
      <span className={css.modify}>
        {txt.total}
        {txt.modify > 0 && <span className={css.modifyUp}><img src={arrowUp} alt="" />{txt.modify}</span>}
        {txt.modify < 0 && <span className={css.modifyDown}><img src={arrowDown} alt="" />{txt.modify}</span>}
      </span>
    )
  }

  function getData() {
    setLoading(true)
    http.get(`/api/aircraft/company/?company_id=${id}`)
      .then(res => {
        setData(res ?? [])

        res.some(row => Object.values(row).find(v => v?.modify > 0 || v?.modify < 0)) && setHasModify(true)
      })
      .finally(() => setLoading(false))
  }

  return (
    <div>
      {
        hasModify && (
          <div style={{ textAlign: 'right' }}><img width={12} src={arrowDemo} style={{ marginRight: 6 }} alt="" />近一周数据对比</div>
        )
      }

      <Table
        bordered
        rowKey="unique_no"
        className='my-table brd-b'
        size="small"
        dataSource={data}
        columns={columns}
        loading={loading}
        pagination={false}
        locale={{
          emptyText: loading ? '加载中...' : '暂无数据',
        }}
      />
    </div>
  )
})
